<template>
	<view class="flex-col page">

		<view class="flex-col section space-y-55">
			<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar>
			<!-- <view class="flex-row space-x-20"> -->
			<!-- <image
	        class="image"
	        src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61a70c18dc329c0011116df0/16387580103276389068.png"
	      />
	      <text class="text">学员详情</text> -->
			<!-- </view> -->

			<view class="flex-row items-center space-x-20">
				<view class="flex-col justify-start items-center relative group">
					<image class="image_2"
						src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61a70c18dc329c0011116df0/16383413563475502306.png" />
					<view class="flex-col justify-start items-center text-wrapper pos"><text
							class="font_2 text_4">28</text></view>
				</view>
				<view class="flex-col items-start space-y-29">
					<text class="text_2">蒋忠艳</text>
					<text class="font_1 text_3">学号:2013065256</text>
				</view>
				<view class="flex-col items-start space-y-29 " style="position: absolute;right: 6rpx;">
					<text @click="studentlist" class="text_2" style="padding: 10rpx;background-color: #ffffff;color: blueviolet;border-radius: 30rpx;position: absolute;right: 0;bottom: 40rpx;">学员档案</text>
					<text class="font_1 text_3" style="margin-top: 26rpx;">总课时进度:20/256</text>
				</view>
			</view>
		</view>
		<view class="flex-col">
			<view class="flex-col group_2">
				<view class="flex-row justify-between group_3">
					<!-- <text class="font_3 text_5">班级列表</text>
	        <text class="font_4">课时进度</text>
	        <text class="font_4">学员档案</text>
	        <text class="font_4 text_6">训练成绩</text> -->
					<u-tabs :list="tabsList" lineColor="#635df7 " :activeStyle="{
			  color: '#635df7 ',
			}" :inactiveStyle="{
			  color: '#c2c1c1',
			}" :lineWidth="30" :current="currentTab" @click="onClickTab" />
				</view>
				<!-- <view class="self-start section_2"></view> -->
			</view>
			<!-- <view class="flex-col group_4 space-y-29" v-if="currentTab == 0">
				<view class="flex-row group_5 space-x-37">
					<u-tabs :list="tabList" lineColor="#ffffff " :activeStyle="{
			  color: '#635df7 ',
			}" :inactiveStyle="{
			  color: '#c2c1c1',
			}" :lineWidth="30" :current="currentlist" @click="onClicklist" />
				</view>
				<view class="flex-col justify-start relative group_6">
					<view class="section_3"></view>
					<view class="flex-col space-y-30 pos_2">
						<view class="flex-col list-item space-y-50" :key="i" v-for="(item, i) in 3">
							<view class="flex-row justify-between items-center">
								<view class="flex-col">
									<view class="flex-row group_7 space-x-12">
										<view class="flex-col justify-start items-center shrink-0 text-wrapper_2">
											<text class="font_5">私教</text>
										</view>
										<text class="font_3">私教速成一对二教学</text>
									</view>
									<view class="flex-col justify-start self-start text-wrapper_4">
										<text class="font_1 text_10">冬期游泳课程</text>
									</view>
								</view>
								<view class="flex-col justify-start text-wrapper_3"><text
										class="text_9">今07:00~08:00</text></view>
							</view>
							<view class="flex-row justify-between items-center group_8">
								<view class="flex-row space-x-60">
									<view class="flex-row items-center space-x-7">
										<image class="shrink-0 image_5"
											src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a70c18dc329c0011116df0/16733349629288941427.png" />
										<text class="font_6 text_11">5人</text>
									</view>
									<view class="flex-row items-center space-x-6">
										<image class="shrink-0 image_6"
											src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a70c18dc329c0011116df0/16733349629115448866.png" />
										<text class="font_6">3/10课</text>
									</view>
									<view class="flex-row items-center space-x-7">
										<image class="shrink-0 image_7"
											src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a70c18dc329c0011116df0/16733349629206114162.png" />
										<text class="font_2">07.15-07.30</text>
									</view>
								</view>
								<image class="image_3 image_4"
									src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61a70c18dc329c0011116df0/16383400613492987294.png" />
							</view>
						</view>
					</view>
				</view>
			</view> -->
			<view class="list"  v-if="currentTab == 0">
					<view class="flex-row group_5 space-x-37">
						<u-tabs :list="tabList" lineColor="#ffffff " :activeStyle="{
				  color: '#635df7 ',
				}" :inactiveStyle="{
				  color: '#c2c1c1',
				}" :lineWidth="30" :current="currentlist" @click="onClicklist" />
					</view>
				<view class="item" v-for="(item,index) in classData" :key="index">
			
					<view class="d-flex" v-if="currentTab !== 1" @click="onClick(item)">
						<u-image width="145rpx" height="171rpx" radius="10rpx" :src="item.cover">
						</u-image>
			
						<view style="margin-left: 16rpx">
							<view class="name blod">
								<view class="flex-align">
									<view style="margin-right: 12rpx" v-if="item.train_enum_id == 1">
										<u-tag text="短训" :bgColor="currentTab === 0 ? '#2f75fa' : '#dcdcdc'"
											borderColor="rgba(0,0,0,0)" color="#fff" size="mini"></u-tag>
									</view>
									<view style="margin-right: 12rpx" v-if="item.train_enum_id == 2">
										<u-tag text="长训" :bgColor="currentTab === 0 ? '#26cd78' : '#dcdcdc'"
											borderColor="rgba(0,0,0,0)" color="#fff" size="mini"></u-tag>
									</view>
									<view style="margin-right: 12rpx" v-if="item.train_enum_id == 3">
										<u-tag text="小班" :bgColor="currentTab === 0 ? '#ec46f6' : '#dcdcdc'"
											borderColor="rgba(0,0,0,0)" color="#fff" size="mini"></u-tag>
									</view>
			
									<view class="name">{{item.name}}</view>
								</view>
							</view>
							<view class="venue_s">
								<view class="detail-2" v-if="item.train_enum_id != 1">
									<view
										style="float: left; width: auto;height: 42rpx;background-color: #e8f6f2;border-radius: 30rpx;margin-top: 0rpx;padding: 0rpx 20rpx; ">
										<view style="float: right;line-height: 42rpx;color: #1aa384;margin-right: 6rpx;">
											{{item.coach_name}}
										</view>
									</view>
									<view
										style="float: left; width: auto;height: 42rpx;background-color: #fbdafd;border-radius: 30rpx;margin-top: 0rpx;padding: 0rpx 20rpx; ">
										<view style="float: right;line-height: 42rpx;color: #ee58f6;margin-left: 6rpx;">
											{{item.area_name}}
										</view>
									</view>
								</view>
								<view class="detail-2" v-else>
									<view style="float: left; width: auto;height: 42rpx;padding: 0rpx 20rpx; ">
									</view>
								</view>
							</view>
							<view class="venue_s">
								<view class="bottom flex-between">
									<view class="flex-row justify-between group_3">
										<view class="flex-row items-center self-start group_4">
											<image class="shrink-0 image_5"
												src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a70accdc329c0011116ca9/16731594763839302067.png" />
											<text class="font_6 text_8" v-if="item.train_enum_id == 1">{{item.sku}}</text>
											<text class="font_6 text_8"
												v-else>{{item.train_class_name}}{{item.train_item_name}}</text>
											<!-- <image class="shrink-0 image_5 image_6" v-if="item.train_enum_id != 1"
												src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a70accdc329c0011116ca9/16731594764081021110.png" />
											<text class="font_7 text_9" v-if="item.train_enum_id != 1"></text> -->
										</view>
									</view>
			
								</view>
							</view>
						</view>
					</view>
					<u-empty v-else text="暂无数据" icon="http://cdn.uviewui.com/uview/empty/data.png" />
			
					<view class="d-flex" v-if="currentTab !== 0">
						<u-image width="145rpx" height="171rpx" radius="10rpx" :src="item.cover">
						</u-image>
			
						<view style="margin-left: 16rpx">
							<view class="name blod">
								<view class="flex-align">
									<view style="margin-right: 12rpx">
										<u-tag text="私教" :bgColor="currentTab === 0 ? '#FC39E3' : '#dcdcdc'"
											borderColor="rgba(0,0,0,0)" color="#fff" size="mini"></u-tag>
									</view>
			
									<view class="name">{{item.name}}</view>
								</view>
							</view>
							<view class="venue_s">
								<view class="detail-2">
									<view
										style="float: left; width: auto;height: 42rpx;background-color: #d3d3d3;border-radius: 30rpx;margin-top: 0rpx;padding: 0rpx 20rpx; ">
										<view style="float: right;line-height: 42rpx;color: #ffffff;margin-right: 6rpx;">
											李商隐
										</view>
									</view>
								</view>
							</view>
							<view class="venue_s">
								<view class="bottom flex-between">
									<view class="flex-row justify-between group_3">
										<view class="flex-row items-center self-start group_4">
											<image class="shrink-0 image_5"
												src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a70accdc329c0011116ca9/16731594763839302067.png" />
											<text class="font_6 text_8" style="color: #d3d3d3;">{{item.sku}}</text>
											<image class="shrink-0 image_5 image_6"
												src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a70accdc329c0011116ca9/16731594764081021110.png" />
											<text class="font_7 text_9" style="color: #d3d3d3;">07.15-07.30</text>
										</view>
									</view>
			
								</view>
							</view>
			
						</view>
					</view>
			
					<!-- <view class="d-flex" v-if="currentTab !== 1">
						<view style="width: 100rpx; height: 100rpx;position: absolute;right: 20rpx;bottom: -32rpx;">
							<view class="qrcode" style="margin-left: 50rpx;" @click="onClickewm(item)">
								<u-image :src="`${assetsPath}fdacef21716adb6bb50e280a9351814e2327e9fd.png`" width="52rpx"
									height="52rpx"></u-image>
							</view>
						</view>
					</view> -->
				</view>
			
			</view>
			<view class="flex-col group_s space-y-29" v-if="currentTab == 1">
				<view class="flex-row group_5 space-x-37">
					<u-tabs :list="tabList" lineColor="#ffffff " :activeStyle="{
			        color: '#635df7 ',
			      }" :inactiveStyle="{
			        color: '#c2c1c1',
			      }" :lineWidth="30" :current="currentlist" @click="onClicklist" />
				</view>
				<view class="flex-col justify-start relative group_6">
					<view class="section_4"></view>
			  <view class="flex-col space-y-30 pos_2">
						<view class="flex-col section_3" :key="i" v-for="(item, i) in 3">
							<view class="flex-row justify-between items-center">
								<view class="flex-col justify-start text-wrapper_3">
									<text class="font_6 text_9">第二节丨水中倒立</text>
								</view>
			 				<view class="flex-col justify-start items-center text-wrapper_2">
									<text class="font_5 text_10">今日上课</text>
								</view>
							</view>
							<text class="self-start font_2 text_11 text_12">2021/05/09</text>
							<text class="self-start font_4 text_13">14:00~15:00</text>
							<view class="flex-row group_7 space-x-4">
								<image class="image_3"
									src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a70c18dc329c0011116df0/16733355955021190117.png" />
								<text class="font_7 text_14">暑期游泳培训班</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="flex-col group_w" v-if="currentTab == 2">
				<view class="flex-col group_5">
					<view class="flex-row justify-between items-center group_6">
						<text class="font_1">联系电话</text>
						<text class="font_3 text_7">15965711214</text>
					</view>
					<view class="flex-row justify-between items-center group_6">
						<text class="font_1">生日</text>
						<text class="font_3 text_8">1995-3-11</text>
					</view>
					<view class="flex-row justify-between items-center group_6">
						<text class="font_1">身高</text>
						<text class="font_3 text_9">172cm</text>
					</view>
					<view class="flex-row justify-between items-center group_6">
						<text class="font_1">体重</text>
						<text class="font_3 text_7">120kg</text>
					</view>
					<view class="flex-row justify-between items-center group_6">
						<text class="font_1">身份证</text>
						<text class="font_3 text_8">350532544879887415</text>
					</view>
					<view class="flex-row justify-between items-center group_6">
						<text class="font_1">紧急联系人</text>
						<text class="font_3 text_9">李大白</text>
					</view>
					<view class="flex-row justify-between items-center group_7">
						<text class="font_1">紧急联系人电话</text>
						<text class="font_3 text_8">15651039802</text>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import QSNavbar from "@/page_other/components/QS-Navbar/QS-Navbar.vue";
	export default {
		components: {
			QSNavbar
		},
		data() {
			return {
				classData: [
					{
						area_name: "世濠校区",
						coach_name: "",
						cover: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/39/46b290948dff1821639a1a55d1525f.png?attname=3.png",
						id: 275,
						name: "蛙泳培训",
						sku: "令狐冲",
						student_name: "祁志龙111",
						train_class_name: "",
						train_enum_id: 1,
						train_item_name: "",
					},
					{
						area_name: "紫琅校区",
						coach_name: "高启兰",
						cover: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/88/95ead82df34986955f0b396fada48b.png?attname=16413714224711392172.png",
						goods_spec: "",
						id: 242,
						name: "小班报名测试冲突",
						student_name: "祁志龙111",
						train_class_name: "",
						train_enum_id: 3,
						train_item_name: "小班报名测试冲突",
					},
					{
						area_name: "紫琅校区",
						coach_name: "高启兰",
						cover: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/ab/daf0a905a3239ec0a7229461b026a9.png?attname=b6413f172a39f5c38e43b6f82e95a04c.png",
						goods_spec: ",2,3,",
						id: 281,
						name: "足球少儿班级",
						student_name: "祁志龙111",
						train_class_name: "高教练长训二队",
						train_enum_id: 2,
						train_item_name: "高教练长训二队",
					},
				],
				navbarItems_1: [{
						type: "icon",
						icon: "back",
						layout: "left",
						width: 15,
						doEvent: "back",
						iconColor: "#fff",
					},
					{
						type: "text",
						text: "学员详情",
						width: 70,
						weight: "bold",
						color: "#fff",
						textAlign: "left",
					},
				],
				tabsList: [{
						name: "班级列表"
					},
					{
						name: "课时进度"
					},
					{
						name: "学员档案"
					},
					{
						name: "训练成绩"
					}
				],
				tabList: [{
						name: "教学中"
					},
					{
						name: "已结业"
					}
				],
				currentTab: 0,
				currentlist: 0,
			};
		},
		onLoad(options) {},
		methods: {
			studentlist(){
				uni.navigateTo({
					url:'./management_student'
				})
			},
			onClickTab({
				index
			}) {
				this.currentTab = index;
				/* if (this.currentTab === 1) {
	   		this.orderStatus = '2'
	   
	   	} else {
	   		this.orderStatus = 'all'
	   	} */
			},
			onClicklist({
				index
			}) {
				this.currentlist = index;
				/* if (this.currentTab === 1) {
	   		this.orderStatus = '2'
	   
	   	} else {
	   		this.orderStatus = 'all'
	   	} */
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import '../../static/css/common/common.scss';

	.page {
		background-color: #ffffff;
		border-radius: 0px 0px 16rpx 16rpx;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		
		.list {
			padding: 30rpx;
			line-height: 34rpx;
			color: #333333;
			background-color: white;
		}
		
		.item {
			padding: 30rpx;
			background: #ffffff;
			box-shadow: 0px 6rpx 13rpx 1rpx rgba(23, 106, 180, 0.2);
			border-radius: 10rpx;
			position: relative;
		
			&+.item {
				margin-top: 30rpx;
			}
		
			.name {
				font-size: 30rpx;
			}
		
			.venue {
				font-size: 24rpx;
				margin: 19rpx 0;
			}
		
			.venue_s {
				font-size: 24rpx;
		
			}
		
			.date {
				font-size: 24rpx;
				color: #888888;
			}
		
			.to {
				background: #f3f3f3;
				border-radius: 50%;
				width: 51rpx;
				height: 51rpx;
			}
		
			.share_m {
				width: 140rpx;
				height: 60rpx;
				border-radius: 50%;
				position: absolute;
				top: 12%;
				right: -30rpx;
				font-size: 25rpx;
		
			}
		
			.share_mc {
				width: 140rpx;
				height: 60rpx;
				border-radius: 50%;
				position: absolute;
				top: 18%;
				right: 160rpx;
				font-size: 25rpx;
		
			}
		
			.share_a {
				width: 140rpx;
				height: 60rpx;
				border-radius: 50%;
				position: absolute;
				top: 5%;
				right: 3rpx;
		
				#shareBtn {
					width: 110rpx;
					height: 60rpx;
					position: absolute;
					border-radius: 50%;
					top: 0;
					left: -2rpx;
					opacity: 0.1;
					font-size: 20rpx;
					text-align: center;
					line-height: 60rpx;
				}
			}
		}
		
		.list {
			&.end {
				.name {
					color: #999;
				}
			}
		
			.item {
				box-shadow: 0px 6rpx 13rpx 1rpx rgba(23, 106, 180, 0.2);
				border-radius: 20rpx;
				background: #ffffff;
				padding: 20rpx 20rpx;
				height: 211rpx;
		
				&+.item {
					margin-top: 30rpx;
				}
		
				.name {
					font-size: 30rpx;
					font-weight: bold;
					line-height: 34rpx;
				}
		
				.detail-2 {
					width: 100%;
					height: 50rpx;
					margin-top: 17rpx;
					color: #bebebe;
					font-size: 22rpx;
					font-weight: 500;
				}
		
				.text-wrapper_1 {
					padding: 11.5rpx 0 14rpx;
					background-color: #fa4c4c;
					border-radius: 25.5rpx 0px 0px 25.5rpx;
					height: 52rpx;
				}
		
				.text_5 {
					margin-left: 21rpx;
					margin-right: 4rpx;
					color: #ffffff;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 22rpx;
					margin-top: -10rpx;
				}
		
				.date {
					right: 0;
					top: 30rpx;
					background: #fa4c4c;
					border-radius: 26rpx 0px 0px 26rpx;
					width: 198rpx;
					height: 40rpx;
					font-size: 24rpx;
					color: #fff;
				}
		
				.bottom {
					font-size: 22rpx;
		
					.group_3 {
		
		
						.group_4 {
							// margin-top: 27rpx;
							padding: 20rpx 0 0rpx 20rpx;
		
							.image_5 {
								width: 25rpx;
								height: 25rpx;
							}
		
							.font_6 {
								position: absolute;
								font-size: 22rpx;
								line-height: 21rpx;
								font-weight: 500;
								color: #333333;
								width: 65%;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
		
							.text_8 {
								margin-left: 7rpx;
								margin-top: 2rpx;
							}
		
							.image_6 {
								margin-left: 35rpx;
							}
		
							.font_7 {
								font-size: 22rpx;
								line-height: 17rpx;
								font-weight: 500;
								color: #333333;
							}
		
							.text_9 {
								margin-left: 7rpx;
							}
						}
		
						.image_4 {
							width: 52rpx;
							height: 52rpx;
						}
					}
		
					.left {
						.it {
							&+.it {
								margin-left: 35rpx;
							}
						}
					}
				}
			}
		}
		
		.section {
			// padding: 0rpx 30rpx 23rpx;
			background-image: linear-gradient(0deg, #635df7 0%, #908cf6 100%);

			.space-x-20 {
			padding: 0rpx 30rpx 23rpx;
				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-left: 20rpx;
				}

				.image {
					width: 20rpx;
					height: 37rpx;
				}

				.text {
					color: #ffffff;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 700;
					line-height: 35rpx;
				}

				.group {
					padding-bottom: 7rpx;
					width: 84rpx;

					.image_2 {
						width: 84rpx;
						height: 84rpx;
					}

					.text-wrapper {
						padding: 6rpx 0;
						background-color: #2f75fa;
						border-radius: 15rpx;
						width: 56rpx;

						.text_4 {
							color: #ffffff;
						}
					}

					.pos {
						position: absolute;
						left: 50%;
						top: 61rpx;
						transform: translateX(-50%);
					}
				}
			}
		}

		.space-y-55 {

			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				margin-top: 55rpx;
			}
		}

		.group_2 {
			padding: 0 28rpx;
			border-bottom: solid 1rpx #efefef;

			.group_3 {
				// padding: 29rpx 0 22rpx;

				.text_5 {
					color: #635df7;
				}

				.font_4 {
					font-size: 30rpx;
					font-family: PingFang SC;
					line-height: 29rpx;
					font-weight: 500;
					color: #999999;
				}

				.text_6 {
					line-height: 28rpx;
				}
			}

			.section_2 {
				margin-left: 12rpx;
				background-color: #635df7;
				border-radius: 4rpx;
				width: 90rpx;
				height: 8rpx;
			}
		}

		.group_4 {
			// padding-top: 31rpx;

			.group_5 {
				padding: 0 30rpx;

				.text_7 {
					color: #635df7;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 700;
					line-height: 26rpx;
				}

				.text_8 {
					color: #282828;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 24rpx;
				}
			}

			.space-x-37 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-left: 37rpx;
				}
			}

			.group_6 {
				padding-top: 208rpx;

				.section_3 {
					background-color: #ffffff;
					height: 932rpx;
				}

				.space-y-30 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-top: 30rpx;
					}

					.list-item {
						padding: 20rpx 0 20rpx 20rpx;
						background-color: #ffffff;
						box-shadow: 0px 6rpx 13.16rpx 0.84rpx #176ab433;
						border-radius: 20rpx;

						.group_7 {
							padding-bottom: 20rpx;

							.text-wrapper_2 {
								padding-bottom: 5rpx;
								background-color: #fc39e3;
								border-radius: 5rpx;
								width: 64rpx;
								height: 27rpx;

								.font_5 {
									font-size: 22rpx;
									font-family: PingFang SC;
									line-height: 21rpx;
									font-weight: 500;
									color: #ffffff;
								}
							}
						}

						.space-x-12 {

							&>view:not(:first-child),
							&>text:not(:first-child),
							&>image:not(:first-child) {
								margin-left: 12rpx;
							}
						}

						.text-wrapper_4 {
							padding: 10rpx 0;
							background-color: #ff8f051a;
							border-radius: 20.5rpx;

							.text_10 {
								margin: 0 8rpx;
							}
						}

						.text-wrapper_3 {
							padding: 16rpx 6rpx;
							background-color: #fa4c4c;
							border-radius: 25.5rpx 0px 0px 25.5rpx;
							height: 52rpx;

							.text_9 {
								margin-left: 21rpx;
								margin-right: 4rpx;
								color: #ffffff;
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 500;
								line-height: 22rpx;
							}
						}

						.group_8 {
							padding: 0 12rpx;

							.space-x-60 {

								&>view:not(:first-child),
								&>text:not(:first-child),
								&>image:not(:first-child) {
									margin-left: 60rpx;
								}

								.space-x-7 {

									&>view:not(:first-child),
									&>text:not(:first-child),
									&>image:not(:first-child) {
										margin-left: 7rpx;
									}

									.image_5 {
										width: 23rpx;
										height: 23rpx;
									}

									.text_11 {
										line-height: 20rpx;
									}

									.image_7 {
										width: 25rpx;
										height: 25rpx;
									}
								}

								.space-x-6 {

									&>view:not(:first-child),
									&>text:not(:first-child),
									&>image:not(:first-child) {
										margin-left: 6rpx;
									}

									.image_6 {
										width: 24rpx;
										height: 25rpx;
									}
								}

								.font_6 {
									font-size: 22rpx;
									font-family: PingFang SC;
									line-height: 21rpx;
									font-weight: 500;
									color: #333333;
								}
							}

							.image_3 {
								width: 51rpx;
								height: 51rpx;
							}

							.image_4 {
								margin-right: 8rpx;
							}
						}
					}

					.space-y-50 {

						&>view:not(:first-child),
						&>text:not(:first-child),
						&>image:not(:first-child) {
							margin-top: 50rpx;
						}
					}
				}

				.pos_2 {
					position: absolute;
					left: 29rpx;
					right: 31rpx;
					top: 0;
				}
			}
		}

		.group_w {
			padding-bottom: 501rpx;

			.group_5 {
				padding: 0 30rpx;
				// border-bottom: solid 1rpx #efefef;

				.group_6 {
					padding: 40rpx 0;
					border-bottom: solid 1rpx #e5e5e5;

					.text_7 {
						margin-right: 20rpx;
					}

					.text_8 {
						margin-right: 13rpx;
					}
				}

				.group_7 {
					padding: 40rpx 0;
					border-bottom: solid 1rpx #e5e5e5;

					.text_9 {
						margin-right: 3rpx;
					}
				}
			}

			.group_8 {
				padding: 43rpx 30rpx 39rpx;
				border-bottom: solid 1rpx #efefef;

				.text_10 {
					line-height: 28rpx;
				}
			}

			.group_9 {
				padding: 42rpx 32rpx;
				border-bottom: solid 1rpx #efefef;

				.text_11 {
					margin-right: 4rpx;
				}
			}

			.font_3 {
				font-size: 28rpx;
				font-family: PingFang SC;
				line-height: 22rpx;
				font-weight: 500;
		 	color: #333333;
			}

			.group_10 {
				padding: 40rpx 27rpx 40rpx 32rpx;
				border-bottom: solid 1rpx #efefef;

				.text_12 {
					line-height: 27rpx;
				}
			}

			.group_11 {
				margin-top: 42rpx;
				// padding: 0 32rpx;
				padding: 0 32rpx 40rpx 32rpx;
				border-bottom: solid 1rpx #efefef;

				.text_13 {
					line-height: 27rpx;
				}

				.text_14 {
					margin-right: 11rpx;
				}
		 }
		}

		.group_s {

			// padding-top: 31rpx;
			.group_5 {
				padding: 0 30rpx;

				.text_7 {
					color: #635df7;
					line-height: 26rpx;
				}

				.text_8 {
					color: #282828;
					line-height: 24rpx;
				}
			}

			.space-x-37 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-left: 37rpx;
				}
			}

			.group_6 {
				padding-top: 208rpx;

				.section_4 {
					background-color: #ffffff;
					height: 932rpx;
				}

				.space-y-30 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-top: 30rpx;
					}

					.section_3 {
						padding: 15rpx 0 20rpx 20rpx;
						background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61a70c18dc329c0011116df0/16383405900026473353.png');
						background-size: 100% 100%;
						background-repeat: no-repeat;

						.text-wrapper_3 {
							padding: 9rpx 0;
							background-color: #55bef31a;
							border-radius: 20.5rpx;
							height: 41rpx;

							.font_6 {
								font-size: 24rpx;
								font-family: PingFang SC;
								line-height: 23rpx;
								font-weight: 500;
								color: #333333;
							}

							.text_9 {
								margin-left: 22rpx;
								margin-right: 18rpx;
							}
						}

						.text-wrapper_2 {
							padding: 14rpx 0;
							background-color: #fa4c4c;
							border-radius: 25.5rpx 0px 0px 25.5rpx;
							width: 144rpx;
							height: 52rpx;

							.text_10 {
								color: #ffffff;
								line-height: 25rpx;
							}
						}

						.text_11 {
							line-height: 21rpx;
						}

						.text_12 {
							margin-left: 25rpx;
							margin-top: 14rpx;
						}

						.text_13 {
							margin-left: 25rpx;
							margin-top: 19rpx;
						}

						.group_7 {
							margin-top: 19rpx;

							.image_3 {
								width: 19rpx;
								height: 19rpx;
							}

							.font_7 {
								font-size: 20rpx;
								font-family: PingFang SC;
								line-height: 20rpx;
								font-weight: 500;
								color: #999999;
							}

							.text_14 {
								line-height: 19rpx;
							}
						}

						.space-x-4 {

							&>view:not(:first-child),
							&>text:not(:first-child),
							&>image:not(:first-child) {
								margin-left: 4rpx;
							}
						}
					}
				}

				.pos_2 {
					position: absolute;
					left: 29rpx;
					right: 29rpx;
					top: 0;
		 	}
			}

			.font_5 {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
			}

			.font_4 {
				font-size: 26rpx;
				font-family: PingFang SC;
				line-height: 20rpx;
				font-weight: 700;
				color: #333333;
			}
		}

		.space-y-29 {
			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				margin-top: 29rpx;
			}

			.text_2 {
				color: #ffffff;
				font-size: 28rpx;
				font-weight: 500;
				line-height: 27rpx;
			}

			.text_3 {
				color: #ffffff;
			}
		}

		.font_3 {
			font-size: 30rpx;
			line-height: 29rpx;
			font-weight: 700;
			color: #333333;
		}

		.font_1 {
			font-size: 26rpx;
			line-height: 23rpx;
			font-weight: 500;
			color: #000000;
		}

		.font_2 {
			font-size: 22rpx;
			line-height: 17rpx;
			font-weight: 500;
			color: #333333;
		}
	}
</style>
